<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lapi</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        ul,li{
            margin: 0;
            list-style:disc;
            padding: 0;
        }
        .container{
            background-color: #eee;
            border-radius: 15px;
            box-shadow:0 0 10px #666;
            width: 99%;
            margin-top: 10px;
        }
        .title{
            padding-left: 25px;
            border-bottom:1px solid #34495e;
        }
        .detail{
            padding: 10px 33px;
        }
        .detail ul li{
            float: left;
            min-width: 45%;
            margin: 0 15px 5px;
            line-height: 24px;
            font-size: 18px;
        }
        .detail ul li:nth-child(odd){
            border-right: 1px black solid;
        }
        .detail ul li a{
            text-decoration: none;
            color:#333;
        }
        .detail ul li a:hover{
            color: #1abc9c;
        }
        .sub-edit{
            float: right;
            font-size: 14px;
            line-height: 32px;
            padding-right: 18px;
        }
        .search{
            text-align: right;
        }
        #search-txt{
            height: 16px;
        }
        #search-btn{
            height: 36px;
            margin-top: -10px;
        }
        .edit{
            float:right;
            padding-right: 15px;
            line-height: 45px;
            font-size: 18px;
        }
        .edit a{
            text-decoration: none;
            color:#34495e;
        }
        .edit a:hover{
            color:#1abc9c;
        }
    </style>
    <script type="text/javascript">
        $(function(){
           $(".edit a").click(function(){
               var id = $(this).parent().attr("pid");
               if($(this).attr("href") == "#del"){
                   if(confirm("Are U Sure?")){
                       $.get("product/del.do?id="+id,function(){
                           location.reload();
                       });
                   }

               }
           });
            $(".sub-edit a").click(function(){
                var apid = $(this).parent().attr("apid");
                if(confirm("Are U Sure?")){
                    $.get("api/del.do?id="+apid,function(){
                        location.reload();
                    });
                }
            });
        });
        function churl(id){
            this.parent.window.location.href="index.html#"+id;
            this.parent.window.location.reload();
        }
    </script>
</head>
<body>
<div class="search">
    <span><input type="text" placeholder="Search API doc here" id="search-txt"></span>
    <span><input type="button" id="search-btn" class="btn" value="search"></span>
</div>
<#list plist as product>
<div class="container">
    	<span class="edit" pid="${product.id}">
			<a href="#edit" class="fui-new-24"></a>
			<a href="#del" class="fui-cross-24"></a>
		</span>
    <h3 class="title">${product.name}</h3>

    <div class="detail clearfix">
        <ul>
            <#list product.apis as api>
                <li>
                    <div class="api">
                        <a href="#" onclick="churl(${api.id})">${api.title}</a>
                        <span class="sub-edit" apid="${api.id}"><a href="#"  class="fui-cross-16"></a></span>
                        <p>${api.detail}</p>
                    </div>
                </li>
            </#list>
        </ul>
    </div>
</div>
</#list>
</body>
</html>